<template>
	<div class="page">
		<div v-if="show==0">
			<div class="title">
				请选择投诉原因
			</div>
			<div class="options">
				<div :class="{'select':item.select }" v-for="(item,index) in option" @click="select(item,index)">
					{{item.name}}
				</div>
			</div>
			<div class="btn" @click="next">
				下一步
			</div>
		</div>
		<div v-if="show==1">
			<div class="title">投诉描述</div>
			<div class="textarea">
				<textarea confirm-type="done" class="text"  @input="bindTextAreaBlur" placeholder="请输入详细投诉内容"/>
			</div>
			<div class="btn" @click="submit">
				提交
			</div>
		</div>
		<div v-if="show==2">
			<div class="img">
				<img src="../../static/answer/complain_suc.png" />
			</div>
			<div class="msg">
				<span>感谢您的参与，我们坚决反对色情、暴力、欺诈等违规信息，我们会认证处理您的投诉，维护健康绿色的网络环境</span>
			</div>
			<div class="btn" @click="back">
				确定
			</div>
		</div>
	</div>
</template>

<script>
	import {sendComplain} from '@/api/api'
	import { mapGetters } from 'vuex'
	export default{
		computed:{
			...mapGetters(['activityType'])
		},
		data(){
			return{
				option:[
					{name:'广告内容',select:false},
					{name:'色情低俗',select:false},
					{name:'人身攻击',select:false},
					{name:'虚假/垃圾信息',select:false},
					{name:'违法信息',select:false},
					{name:'其他',select:false},
				],
				show:0,
				content:'',
				actid:'',
				optionText:'',
				query:''
			}
		},
		methods:{
			bindTextAreaBlur(value){
				this.content = value.detail.value
			},
			select(data,index){
				this.option.forEach(item=>{
					item.select = false
				})
				data.select = true
				this.optionText=data.name
			},
			next(){
				let count = 0
				this.option.forEach(item=>{
					if(item.select)
						count++
				})
				if(count>0)
					this.show=1
				else{
					uni.showToast({
						title:'请选择一项投诉原因',
						icon:'none'
					})
				}
			},
			submit(){
				console.log(this.content)
				if(this.content==''){
					uni.showToast({
						title:'请输入详细原因',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title:'正在提交投诉'
				})
				let _this = this
				let obj ={
					plugin:this.activityType,
					actid:this.actid,
					content:'【'+this.optionText+'】'+this.content
				}
				sendComplain(obj).then(res=>{
					uni.hideLoading()
					_this.show=2
				})
			},
			back(){
				uni.navigateTo({
					url:'/?type='+this.query.type+'&plugin='+this.query.plugin+'&id=' + this.actid
				})
			}
		},
		onLoad(op){
			this.actid = op.id
			this.query = op
		}
	}
</script>

<style lang="scss">
	.page{
		.title{
			margin-top: 13rpx;
			margin-left: 24rpx;
			width: 726rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		.options{
			margin-top: 23rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			width: 718rpx;
			padding: 0 18rpx;
		
			border-radius: 10rpx;
			
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			&>div{
				background: #F6F6F6;
				// padding: 23rpx 0;
				width: 218rpx;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				margin: 0 10rpx 20rpx 10rpx ;
				
				border-radius: 10rpx;
			}
			.select{
				border: 1rpx solid #468AFF;
				color: #468AFF;
				width: 214rpx!important;
				height: 72rpx!important;
				line-height: 72rpx!important;
				
			}
		}
		.textarea{
			width: 704rpx;
			margin: 23rpx auto 50rpx;
			background: #F6F6F6;	
			.text{
				padding: 10rpx;
			}
		}
		.img{
			width: 100%;
			line-height: 0;
			margin-top: 58rpx;
			text-align: center;
			img{
				width: 302rpx;
				height: 250rpx;
			}
		}
		.msg{
			margin: 22rpx auto 16rpx;
			width: 551rpx;
			height: 120rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		.btn{
			margin: 30rpx auto 0;
			width: 480rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: #468AFF;
			border-radius: 44rpx;
		}
	}
</style>